<template>
  <div class='path-index container'>
    <Header>
      <span v-if='pathStatus'>添加地址</span>
      <span v-else>编辑地址</span>
    </Header>
    <section>
      <van-address-edit
        v-if='pathStatus'
        show-area
        :area-list="areaList"
        show-set-default
        show-search-result
        @save="onAdd"
      />
      <van-address-edit
        v-else
        :address-info='AddressInfo'
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        @save="onUpdate"
        @delete="onDelete"
      />
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { Toast } from "vant";
import Header from "@/components/path/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
//import Indicator from "../../common/api/request.js";
import http from "@/common/api/request.js";
export default {
  data() {
    return {
      AddressInfo: {},
      pathStatus: false,
      areaList: {
        //areaList是一个对象 所以要areaList: {} 地区列表默认值
        province_list: {
          100000: "虚拟商品无需地址",
          110000: "北京市",
          120000: "天津市",
        },
        city_list: {
          100100: "",
          110100: "北京市",
          120100: "天津市",
        },
        county_list: {
          100101: "",
          110101: "东城区",
          110102: "西城区",
          120101: "塘沽区",
        },
      },
      /* searchResult: [], */
    };
  },
  components: {
    Header,
    Tabbar,
  },
  created() {
    //console.log(this.$route.params);
    /* 传参的是this.$router.push接收的是route*/
    /*     参照下面
    goList(options) {
        this.$router.push({
          name: "path-list",
          //隐式的形式传过去
          params: {
            key: options, //在create部分接收
          },
        });
      }, 
    */
    /*
     -----------------------------------------    
    if (this.$route.params.key == "add") {
      //是通过添加地址进来的
      this.pathStatus = true;
    }  
    下面代码精简
    ------------------------------------------*/
    let key = JSON.parse(this.$route.params.key); //parse解析
    //添加进来
    if (key == "add") {
      //是通过添加地址进来的
      this.pathStatus = true;
    } else {
      //是编辑进来的
      //console.log(JSON.parse(key));
      //console.log(key);=》JSON.stringify&&JSON.parse
      //console.log(JSON.stringify(options));
    }
  },

  mounted() {
    let key = JSON.parse(this.$route.params.key);
    //是通过添加进来的
    if (key == "add") {
      this.pathStatus = true;
    } else {
      //编辑进来的
      //AddressInfo这个要从官网文档上查看，是全部表格信息 path-index里面的item  :address-info='AddressInfo'//赋值
      this.AddressInfo = key;
      this.AddressInfo.isDefault =
        this.AddressInfo.isDefault == 1 ? true : false;
      //上面判断是逆转换1转换为true
      //缺少了areaCode导致地址不能显示//但是不应该在这里赋值，应该存在数据库里然后到时候提出来
    }
  },
  methods: {
    //点击保存触发 ==> 增加
    onAdd(content) {
      content.isDefault = content.isDefault == true ? 1 : 0;
      http
        .$axios({
          url: "/api/addAddress",
          method: "post",
          headers: {
            token: true,
          },
          data: {
            ...content,
          },
        })
        .then((res) => {
          if (!res.success) return;
          Toast(res.msg);
          this.$router.push("/path");
        });
    },
    //点击保存触发 ==> 修改
    //原先是onUpdate() {}//这样不行，传不过来
    onUpdate(content) {
      content.isDefault = content.isDefault == true ? 1 : 0;
      http
        .$axios({
          url: "/api/updateAddress",
          method: "post",
          headers: {
            token: true,
          },
          data: {
            ...content, //回调？
            //配上...this.AddressInfo =》表格里的信息？？
          },
        })
        .then((res) => {
          if (!res.success) return;
          Toast(res.msg);
          this.$router.push("/path");
        });
    },
    //删除
    onDelete(content) {
      http
        .$axios({
          url: "/api/deleteAddress",
          method: "post",
          headers: {
            token: true,
          },
          data: {
            id: content.id, //只需要传一个id值
          },
        })
        .then((res) => {
          if (!res.success) return;
          Toast(res.msg); //msg:'删除成功' 
          this.$router.push("/path");
        });
    },
  },

  //methods: {
  /*     onSave() {
      Toast("save");
    }, */
  /* onSave(content) {
      //Toast("保存成功");
      //回调函数
      //传东西过去要考虑存入数据库那些数据最有效，比如默认地址传过去是true或者false 我们存进数据库就存1或0 这样比较好
      content.isDefault = content.isDefault == true ? 1 : 0;
      console.log(content);
      //发送请求
      Indicator.$axios({
        url: "/api/addAddress",
        method: "post", //主要是method写错导致404
        headers: {
          token: true, //token
        },
        data: {
          //content
          ...content, //解析过去
        },
      }).then((res) => {
        if (!res.success) {
          Toast("出错了");
          this.$router.push("/home"); //path: "/path", 以一级的为准
          return;
        } //不成功的话就不显示下面了
        Toast(res.msg);
        this.$router.push("/path/");
      });
    },
  },*/
};
</script>

<style lang='scss' scoped>
section {
  background-color: #f7f7f7;
  /*   .van-address-edit {
    padding: 0;
  } */
  ::v-deep .van-address-edit__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; //让删除和确认按钮可以换行
  }
  ::v-deep .van-button--danger {
    //保存按钮
    width: 8rem;
    height: 1.066666rem;
    background-color: #b0352f;
  }
  ::v-deep .van-button--default {
    //删除按钮
    width: 8rem;
    height: 1.066666rem;
  }
}
::v-deep .tabbar {
  border-top: 2px solid #ccc;
}
</style>
